{extend name="layout/layout" /}

{block name="pagecss"}
<link href="__STATIC__/admin/pages/css/operator.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
<div class="row js-check-wrap">
	<div class="col-lg-12">
		<div class="box box-success">
			<div class="box-header with-border">
				<div class="row">
					<div class="col-md-9">
						{$title}
					</div>
				</div>
				<div class="box-tools pull-right">
					<a href="{:url('admin/operator/add')}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> 添加店员</a>
				</div>
			</div>
			<div class="box-body ">
				<form class="js-ajax-form" method="post">
					<div class="table-responsive">
						<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table_operator">
							<thead>
							<tr>
								<th> 姓名 </th>
								<th> 电话 </th>
								<th> 用户账号 </th>
								<th> 门店 </th>
								<th> 创建时间 </th>
								<th> 操作 </th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/js/include.js" type="text/javascript"></script>
<script>
    var table = $('#table_operator');
    table.dataTable({
        "processing": true,            
        serverSide: true,// 开启服务器模式
        "ajax": {
            url: "{:url('admin/operator/indexApi')}", //列表查询
        },
        "autoWidth": true,
        "columns": [
            {"width":"15%","data": "name",},
            {"width":"15%","data": "phone",},
            {"width":"15%","data": "loginName",},
            {"width":"20%","data": "storeName",},
            {
               "width":"15%",
                "data": "createDate",
                "render": function(data, type, row, meta) {
                    return moment(data).format('YYYY-MM-DD HH:mm');
                }
            },             
            {                    
                "data": "null",
                "render": function(data, type, row, meta) {                    
                    var str = '<button type="button" class="btn btn-info btn-xs btn_edit_role">编辑</button>&nbsp;'+
                        '&nbsp;<button type="button" class="btn btn-danger btn-xs btn_del_role" data-id="'+row.id+'" onClick="delOper(this);return false;">删除</button>';
                    return str;
                }
            }
        ],
        "language": {
            url: '/public/static/assets/pages/Chinese.json'
        },
        "pageLength": 15,
        "lengthMenu": [[15, 25, 50, 100, 150], [15, 25, 50, 100, 150]],
        "order": [
        ],
        "columnDefs": [{
            "orderable": false,
            "targets": [0,1,2,3,4]
        }],
        "dom" : "<'row'<'.col-md-6 col-sm-12'><'col-md-6 col-sm-12'>r>"
            + "<t>" + "<'table_b relative'<'col-md-5'i><'col-md-7'>lp>",
        "fnInitComplete": function() {},
        "fnDrawCallback": function() {}
    });
    // 编辑
    table.on('click', '.btn_edit_role', function(event) {
        var oData_arr = table.DataTable().rows($(this).parents("tr")).data(); //操作行对象
        var _id = oData_arr[0].id;
        window.location.href = "{:url('admin/operator/edit')}"+"?id="+encodeURIComponent(_id)   ; 
    });

    function delOper(e) {
        var _this = $(this);
        var text = $(this).data('confirm') ? $(this).data('confirm') : '是否要删除？';
        var title = $(this).data('title') ? $(this).data('title') : '删除店员';
        var confirmBtn = $(this).data('confirmbtn') ? $(this).data('confirmbtn') : '确定';
        var cancelBtn = $(this).data('cancelbtn') ? $(this).data('cancelbtn') : '取消';
        layer.confirm(
            text, // 内容
            {
                // icon: 7,
                // 标题
                title: title,
                // 按钮
                btn: [confirmBtn, cancelBtn]
            },
            function(index){
                var id = $(e).attr('data-id');
                $.ajax({
                    url : "{:url('admin/operator/delete')}",
                    type : 'delete',
                    dataType : 'json',
                    contentType:"application/json; charset=utf-8",
                    data : JSON.stringify({ id:id}),
                    async: false
                }).done(function(data) {
                    if (data.code === '1') {
                        window.location.reload();
                    } else if (data.code === '2') {
                        layer.msg(data.message);
                    }
                });

                layer.close(index);
            }
        );
    }
</script>
{/block}